<!--
 * @Author: 梁卓
 * @Date: 2022-02-01 21:53:43
 * @LastEditTime: 2022-02-23 18:06:31
 * @LastEditors: Please set LastEditors
 * @Description: 菜单管理界面
 * @FilePath: \dreamUi\src\views\system\Menu.vue
-->
<template>
  <div>
    <el-card>
      <el-row>
        <el-col :span="8">
          <el-input  v-model="queryInfo.queryString" clearable placeholder="Please input" @clear="findMenu">
            <el-button icon="el-icon-search" slot="append" @click="findMenu"></el-button>
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="insert" v-hasPermission="['MENU_INSERT']">添加</el-button>
        </el-col>
      </el-row>
      <el-table  v-loading="loading" :data="tableData" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%" row-key="id">
          <el-table-column prop="path" label="前端路由" />
          <el-table-column prop="icon" label="菜单图标" />
          <el-table-column prop="title" label="菜单标题" />
          <el-table-column prop="component" label="前端组件" />
          <el-table-column  fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" circle size="small" v-hasPermission="['MENU_UPDATE']" @click="updateMenu(scope)"/>
              <el-button type="danger" icon="el-icon-delete" circle size="small" v-hasPermission="['MENU_DELETE']" @click="deleteMenu(scope)"/>
            </template>
          </el-table-column> 
      </el-table> 
      <el-pagination
        v-if="total > 0"
        :currentPage="queryInfo.currentPage"
        :page-sizes="[8,15,30,50]"
        :page-size= "queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total= total
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
    <!-- 权限的添加和修改 -->
    <el-dialog :title="title" :visible.sync="open" width="35%" @closed="dialogClose">
      <el-form :model="form" ref="form" :rules="rule">
        <el-form-item label="是否是子级菜单" v-if="!isChildrenMenu">
          <el-checkbox  style="margin-left: -70%;" v-model="isChildrenMenu" />
        </el-form-item>
        <el-form-item label="父级菜单" prop="parentId" v-if="isChildrenMenu">
          <el-select v-model="form.parentId" placeholder="请选择" style="width: 100%;">
            <el-option v-for="(item, index) in parentList.data" :key="index" :label="item.title" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="前端路由" prop="path">
          <el-input v-model="form.path" />
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <e-icon-picker v-model="form.icon"/>
        </el-form-item>
        <el-form-item label="菜单标题" prop="title">
          <el-input v-model="form.title"/>
        </el-form-item>
        <el-form-item label="前端组件" prop="component">
          <el-input v-model="form.component"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFrom">取 消</el-button>
        <el-button type="primary" @click="insertMenu">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Menu',

  data() {
    return {
      // 分页
      queryInfo: {
        pageNumber: 1,
        pageSize: 8,
        queryString: ''
      },
      // 表格数据
      tableData: [],
      // 总条数
      total: 0,
      loading: true,
      // 添加或删除的标题
      title: '',
      // 是否打开对话框
      open: false,
      // 表单数据
      form: {},
      rule: {
        parentId: [
          {require: true, message: '请输入父级菜单', trigger: 'change'}
        ],
        path: [
          {required: true, message: '请输入菜单路径', trigger: 'blur'},
          {min: 1, max: 100, message: '权限标签的长度为1~100之间', trigger: 'blur'}
        ],
        icon: [
          {required: true, message: '请输入菜单图标', trigger: 'change'},
        ],
        title: [
          {required: true, message: '请输入菜单标题', trigger: 'blur'},
          {min: 1, max: 50, message: '权限标签的长度为1~50之间', trigger: 'blur'}
        ],
        component: [
          {required: true, message: '请输入前端组件', trigger: 'blur'},
          {min: 1, max: 50, message: '权限标签的长度为1~50', trigger: 'blur'}
        ]
      },
      parentList: [],
      isChildrenMenu: false
    };
  },

  mounted() {
    
  },
  created() {
    this.findMenu();
    this.findParent();
  },
  methods: {
    findParent() {
      this.$ajax.get('/menu/findParent').then((res) => {
        this.parentList = res.data;
      })
    },
    // 查询分页数据
    findMenu() {
      this.$ajax.post('/menu/findPage',this.queryInfo).then((res) => {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.loading = false
      });
    },
    // 改变页码
    handleSizeChange(param) {
      this.queryInfo.pageSize = param;
      // 重新赋值
      this.findMenu();
    },
    // 改变当前的页面
    handleCurrentChange(param) {
      this.queryInfo.pageNumber = param;
      this.findMenu();
    },
    insert(param) {
      this.title = '新增菜单信息';
      this.open = true;
    },
    // 删除菜单信息
    deleteMenu(param) {
      this.$confirm(`您将永久删除-[${param.row.title}]-菜单, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$ajax.delete(`/menu/delete/${param.row.id}`).then((res) => {
            this.$message.success(res.data.message);
            // 防止删除最后一页中最后一个数据时无法换页的问题
            this.queryInfo.pageNumber = 1;
            // 删除成功后更新数据
            this.findMenu();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 关闭对话框事件
    dialogClose() {
      // 将整个表单进行重置
      this.$refs.form.resetFields();
      this.isChildrenMenu = false;
    },
    // 点击取消对话框
    closeFrom() { 
      this.form = {}
      this.open = false
      this.isChildrenMenu = false
      this.findMenu()
    },
    // 修改权限信息
    updateMenu(param) {
      this.form = param.row;
      this.title = '修改菜单信息';
      this.open = true;
      if (param.row.parentId === null) {
        // 隐藏父级菜单下拉列表
        this.isChildrenMenu = false
      }
    },
    // 添加权限
    insertMenu(param) {
      this.$refs.form.validate(val => {
        // 校验不同通过
        if (!val) {
          return this.$message.error('表单校验不通过，请检查后提交')
        }
        // 判断是否时新增
        if (this.form.id === undefined || this.form.id === null) {
          this.$ajax.post('/menu/insert',this.form).then(res => {
            this.$message.success(res.data.message);
            this.open = false;
            this.findMenu();
            // 刷新界面
            location.reload();
          });
        } else {
          this.$ajax.put('/menu/update',this.form).then(res => {
            this.$message.success(res.data.message);
            this.open = false;
            this.findMenu();
          });
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>

</style>